<template>
  <div class="con">
    <!--header模块start-->
    <div class="header">
      <div class="banner">
        <div class="banner-hd">
          <div class="logo">
            <h2>趣莘编程</h2>
          </div>
          <div class="user">
            <!--通知-->
            <el-badge :value="12" class="message">
              <el-button size="small" class="msg-btn el-icon-message" @click="goTo4()">
              </el-button>
            </el-badge>
            <!--用户信息-->
            <el-dropdown>
              <span class="el-dropdown-link">
                 <div class="user-info">
                  <span class="user-avatar">
                    <img src="@/assets/images/2.jpg" alt="">
                  </span><i class="el-icon-arrow-down el-icon--right"></i>
                </div>
              </span>
              <el-dropdown-menu slot="dropdown" class="el-dropdown-menu">
                <el-dropdown-item @click.native="goTo3()">个人中心</el-dropdown-item>
                <el-dropdown-item >退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

        <div class="banner-bd">
          <p>你喜欢奋斗，方法就越来越多；你喜欢放弃，借口就越来越多；<br>
            你喜欢感恩，顺利就越多！你喜欢抱怨，烦恼就越来越多；<br>
            你喜欢拼搏，成功就越来越多；你喜欢逃避，失败就越来越多；<br>
            天天保持阳光、积极、包容的态度，好运的正能量就每天跟着你！</p>
        </div>
      </div>
    </div>
    <!--header模块end-->
    <!--main模块 start-->
    <div class="main">
      <div class="w">
        <div class="user-card">
          <div class="user-card-content">
            <div class="user-greetings">
              <!--（用户名不能超过10字符会打乱相关样式）-->
              <h2>北京人，上午好!</h2>
            </div>
            <div class="Recent-study">
              <div class="Recent-study-img"></div>
              <i class="level-title">Python基础语法-第1关《数据类型与转换》</i>
              <button class="continue-btn">继续学习</button>
            </div>
          </div>
        </div>
        <div class="user-course">
          <div class="user-course-hd">
            <h2>我的课程:</h2>
          </div>
          <div class="user-course-bd">
            <ul class="clearfix">
              <li @click="goTo2()">
                  <div class="course-cover">
                    <img src="@/assets/images/pythonImage.png" alt="">
                  </div>
                  <div class="course-content">
                    <div class="course-title">
                      <h2>Python基础语法</h2>
                    </div>
                    <p class="course-describe">
                      适合零基础编程小白，敲下人生第一行代码，快速掌握编程思维和能力。
                    </p>
                    <div class="course-state">
                      <el-progress :percentage="50"></el-progress>
                    </div>
                  </div>
              </li>
              <li>
                <div class="course-cover">
                  <img src="@/assets/images/pythonImage.png" alt="">
                </div>
                <div class="course-content">
                  <div class="course-title">
                    <h2>Python数据分析</h2>
                  </div>
                  <p class="course-describe">
                    适合零基础编程小白，敲下人生第一行代码，快速掌握编程思维和能力。
                  </p>
                  <div class="course-state">
                    <el-progress :percentage="50"></el-progress>
                  </div>
                </div>
              </li>

            </ul>
          </div>
        </div>
        <div class="other-function">
          <div class="other-function-hd">
            <h1>其他功能:</h1>
          </div>
          <div class="other-function-hd">
            <ul>
              <li>
                <h1>学生pk</h1>
              </li>
              <li>
                <h1>提问讨论区</h1>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--main模块 end-->
    <!--    footer开始-->
    <div class="footer">
      <div class="w">
        <h3>关于我们&nbsp;隐私政策</h3>
        <p>联系我们 I 地址：深圳市龙岗区坂田街道永香路创汇国际中心808 电子邮箱：XXXX@XXXXXXX.cn 客服：8888888</p>
      </div>
    </div>
    <!--    footer结束-->
  </div>
</template>
<script>

export default {
  components: {
  },
  data() {
    return {};
  },
  created() {
  },
  methods: {
    goTo() {
      this.$router.push('/HomeView');
    },
    goTo2() {
      this.$router.push('/Course');
    },
    goTo3() {
      this.$router.push('/userInfo');
    },
    goTo4() {
      this.$router.push('/inform');
    }
  },
  watch: {},
};
</script>
<style src="@/assets/css/user.css"  scoped></style>
<style scoped>
@import "@/assets/css/base.css";
@import "@/assets/css/common.css";
</style>

